<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        td{
            border: 1px solid black;
            width: 200px;
            height: 50px;
            text-align: center;
        }
    </style>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <table v-if="goods.length>0">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checkAll">
                    </td>
                    <td>图片</td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <!-- input框记得写v-model属性绑定 -->
                <tr v-for="(item,index) in goods" :key="index">
                    <td>
                        <input type="checkbox" v-model="item.check">
                    </td>
                    <td>
                        <img :src="src" width="80px" height="50px">
                    </td>
                    <td>{{item.title}}</td>
                    <td>{{item.price}}元</td>
                    <!-- 数量type为number 可以加减-->
                    <td>
                        <input type="number" v-model.number="item.count">
                    </td>
                    <td>{{item.price * item.count}}元</td>
                    <!-- 删除元素 -->
                    <td>
                        <button @click="goods.splice(index,1)">删除</button>
                    </td>
                </tr>
                
            </tbody>
        </table>

        
        <div v-else>
            <h2>购物车空空如也</h2>
        </div>

        <div>
            <button @click="deleteSelect">删除选中</button>
            <p>选中数量：{{numSelect}} / 总数量：{{numAll}}</p>
            <p>选中总计：{{priceSelect}} / 总价值： {{priceAll}}</p>
        </div>
    </div>
    

    <script>
        const vm = new Vue({
            data:{
                goods:[  // 商品数据 
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},
                ],
                src:"https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2022-10-7/banner.png",
                numSelect:0,
                numAll:0,
                priceSelect:0,
                priceAll:0
            },
            methods:{
                // 删除选中
                deleteSelect(){
                    // filter返回满足条件的数组
                    // 留下的是未选中的
                    this.goods = this.goods.filter(item=>!item.check);
                }
            },

            // 计算属性有依赖值，依赖值改变他就会马上改变
            
            computed:{
                // 新写法每个属性都有get和set方法
                checkAll:{
                    get(){ //取值,有返回值，返回值为v-model的变量的值
                        // 反选，监听checkAll
                        // every和some返回值都为布尔值
                        return this.goods.every(item=>item.check);
                    },
                    set(v){ //主动改变监听值，改变值
                        // 这里的v表示checkAll的值，这里为true和false
                        // 全选
                        console.log(v);
                        this.goods.forEach(item=>{
                            item.check = v;
                        })
                    }
                },
                

            },

            // 总计如果不写计算属性，用监听的话需要更新
            watch:{
                // 浅监听，只监听第一层
                goods:{
                    // 但是需要深监听
                    deep:true,
                    handler(v){
                        // v代表goods数组
                        // console.log(v);
                        // 累加之前先清空，因为每次累加都是在上次的基础上再循环累加
                        this.numSelect = 0;
                        this.numAll = 0;
                        this.priceSelect = 0;
                        this.priceAll = 0;
                        v.forEach(item => {
                            this.numSelect += item.check?item.count:0;
                            this.numAll += item.count;
                            this.priceSelect += item.check?item.price * item.count :0;
                            this.priceAll += item.price * item.count;
                        })
                    }
                }
            },
            // 刚开始时也需要显示，所以载入时就计算
            mounted(){
                this.goods.forEach(item => {
                    this.numSelect += item.check?item.count:0;
                    this.numAll += item.count;
                    this.priceSelect += item.check?item.price * item.count :0;
                    this.priceAll += item.price * item.count;
                })
            }
        }).$mount('#app');
    </script>
</body>
</html>